<template>
    <div class="block">
        <el-col>
            <el-input placeholder="请输入用户名或者邮箱或者手机号查询" v-model="input" class="input-with-select">
                <el-button slot="append" icon="el-icon-search" @click="handlesearch"></el-button>
            </el-input>
        </el-col>
    <el-table
            :data="tableData"
            style="width: 100%"
            v-loading="loading">

        <el-table-column
                prop="username"
                label="用户名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="gender"
                label="性别"
                width="180">
        </el-table-column>
        <el-table-column
                prop="phone"
                label="手机号"
                width="180">
        </el-table-column>
        <el-table-column
                prop="email"
                label="邮箱"
                width="180">
        </el-table-column>
        <el-table-column
                prop="money"
                label="钱包余额"
                width="180">
        </el-table-column>
        <el-table-column
                prop="vip"
                label="vip状态"
                width="180"
                sortable>
        </el-table-column>
        <el-table-column
                prop="registerTime"
                label="注册时间"
                width="180">
        </el-table-column>
        <el-table-column
                prop="avatar"
                label="头像"
                width="180">
        </el-table-column>
        <el-table-column  label="操作">
          <template slot-scope="scope">
            <el-button style="margin-left: 5px" size="mini" @click="findOrders(scope.row.id)">查看该场次订单</el-button>
          </template>
        </el-table-column>
    </el-table>

        <span class="demonstration">{{page}}</span>
        <el-pagination
                @current-change="handlePage"
                :current-page.sync="page"
                :page-size="pagesize"
                layout="total, prev, pager, next"
                :total=this.total>
        </el-pagination>
    </div>
</template>

<script>
  export  default {
      name:"UserListView.Vue",
      data(){
          return {
              loading: true,
              tableData:[],
              total:'',
              page:1,
              input:'',
              pagesize:5,
          }
      },
      created() {
          this.handlelist();
      },
      methods: {
          handlePage(){
              this.axios.get("manage/user/list",{params:{keyword:this.input,pageNum:this.page}}).then(response=>{
                  if (response.data.code){
                      this.tableData = response.data.data.list;
                  }
              })
          },
          handlelist() {
              this.axios.get("manage/user/list").then(response => {
                  if (response.data.code == 200) {
                      this.tableData = response.data.data.list;
                      this.total = response.data.total;
                  }
              }).finally(()=>this.loading=false)
          },
          handlesearch(){
              this.axios.get("manage/user/list",{params:{keyword:this.input}}).then(response=>{
                  if(response.data.code){
                      this.tableData = response.data.data.list;
                  }
              })

          },
          sortTable({prop, order}) {
              if (order === "ascending") {
                  this.tableData.sort((a, b) => this.sortName(a[prop], b[prop]));
              } else if (order === "descending") {
                  this.tableData.sort((a, b) => this.sortName(b[prop], a[prop]));
              } else {
                  this.tableData = [...this.tableDateCopy];
              }
          },
          sortName(a, b) {
              if (a < b) return -1;
              if (a > b) return 1;
              return 0;
          },
          findOrders(id){
            this.$router.push({path:"/orders/list",query:{
                screeningId:id
              }})
          }
      }

  }
</script>

<style scoped>

</style>